<template>
    <div class="login">
        <div class="login-img">
            <img src="../../assets/images/login_bg_doctor.png" alt="">
        </div>
        <div class="deng">
            <img src="../../assets/images/youxiang.png" alt="" class="you">
            <input type="text" placeholder="请输入邮箱账号" v-model="username" class="zhang">
            <div class="heng"></div>
            <img src="../../assets/images/suo.png" alt="" class="suo">
            <input type="text" placeholder="请输入密码" v-model="password" class="mi">
            <div class="heng2"></div>
            <div class="wang">忘记密码</div>
            <div class="shen">申请入驻</div>
            <router-link to="../Home">
                 <button @click="logins" class="denglu">登录</button>
            </router-link>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {getLogin} from '../../request/api'

const router=useRouter()
const username=ref('')
const password=ref('')


const logins=()=>
{
    getLogin({
        username:username.value,
        password:password.value
    }).then((res)=>
    {
        console.log(res);
        let {code,msg,data}=res.data
        console.log(data);
        
        if(code===200)
        {
            localStorage.setItem('token',data.token)
            localStorage.setItem('doctor',data.userData.doctor)
            localStorage.setItem('subjection',data.userData.subjection)
            localStorage.setItem('rank',data.userData.rank)
            localStorage.setItem('oneSkilled',data.userData.oneSkilled)
            localStorage.setItem('context',data.userData.context)
            router.push('/home')
        }
        
    })
}


</script>

<style lang="scss" scoped>
    .login{
        width: 100vw;
        height: 100vh;
        margin-left: -30px;
        margin-top: -20px;
        position: relative;
        width: 100%;
        height: 100%;
        .login-img{
            width: 370px;
            height: 250px;
            position: absolute;
            top: -10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .deng{
            width: 370px;
            height: 200px;
            position: absolute;
            top: 240px;
            .you{
                width: 30px;
                height: 30px;
                position: absolute;
                top: 45px;
                left: 30px;
            }
            .zhang{
                border: none;
                position: absolute;
                left: 80px;
                top: 50px;
                outline: none;
            }
            .heng{
                width: 300px;
                border: solid 1px #ccc;
                position: absolute;
                top: 80px;
                left: 30px;
            }
            .suo{
                width: 30px;
                height: 30px;
                position: absolute;
                top: 105px;
                left: 30px;
            }
            .mi{
                border: none;
                position: absolute;
                left: 80px;
                top: 110px;
                outline: none;
            }
            .heng2{
                width: 300px;
                border: solid 1px #ccc;
                position: absolute;
                top: 150px;
                left: 30px;
            }
            .wang{
                position: absolute;
                top: 160px;
                left: 30px;
                font-size: 10px;
                font-weight: 600;
                color: #858181;
            }
            .shen{
                position: absolute;
                top: 160px;
                right: 20px;
                color: #3b8dea;
                font-weight: 600;
            }
        }
        .denglu{
            position: absolute;
            width: 320px;
            height: 40px;
            top: 330px;
            left: 30px;
            background-color: #3b8dea;
            border: none;
            border-radius: 30px;
            color: white;
        }
    }
</style>